<template>
  <div class="main">
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>健康报备</el-breadcrumb-item>
      <el-breadcrumb-item>全国疫情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10">
      <!-- 疫情概况 -->
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-tabs type="border-card">
            <!-- 疫情概况 -->
            <el-tab-pane label="疫情概览">
              <el-table
                v-loading="loading"
                border
                :data="info"
                style="width: 100%"
                height="495"
              >
                <el-table-column
                  prop="name"
                  label="名称"
                  width="150"
                ></el-table-column>
                <el-table-column prop="value" label="数量">
                  <template slot-scope="scope">
                    <el-tag effect="plain" size="mini"
                      >{{ scope.row.value }}人</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="yesterday" label="较昨日" width="100">
                  <template slot-scope="scope">
                    <el-tag
                      effect="plain"
                      size="mini"
                      v-if="scope.row.yesterday > 0"
                      type="danger"
                      >{{ scope.row.yesterday }} 人</el-tag
                    >
                    <el-tag effect="plain" size="mini" v-else type="success"
                      >{{ scope.row.yesterday }}人</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="时间">
                  <span style="font-size: 11px">{{
                    times
                  }}</span></el-table-column
                >
              </el-table>
            </el-tab-pane>
            <!-- 城市排名 -->
            <el-tab-pane label="TOP10城市">
              <el-table
                height="495"
                border
                :data="top10"
                style="width: 100%; font-size: 10px"
              >
                <el-table-column prop="name" label="城市名称" width="180">
                </el-table-column>
                <el-table-column prop="ename" label="English">
                </el-table-column>
                <el-table-column prop="jwsrNum" label="确诊人数" width="180">
                  <template slot-scope="scope">
                    <el-tag
                      v-text="scope.row.jwsrNum + '人'"
                      size="mini"
                      type="danger"
                      effect="plain"
                    ></el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <!-- 疫情地图 -->
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card>
            <div ref="mapbox" style="height: 520px"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <!-- 疫情数据统计表 -->
    <el-row :gutter="10" style="margin-top: 10px">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-card>
            <el-table stripe :data="tableData" style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <el-table :data="scope.row.city" style="width: 100%">
                    <el-table-column
                      prop="name"
                      label="城市/区"
                      width="200"
                    ></el-table-column>

                    <el-table-column
                      sortable
                      label="现存确诊"
                      prop="econNum"
                    ></el-table-column>
                    <el-table-column
                      sortable
                      label="累计确诊"
                      prop="cureNum"
                    ></el-table-column>
                    <el-table-column
                      sortable
                      label="疑似"
                      prop="susNum"
                    ></el-table-column>
                    <el-table-column
                      sortable
                      label="死亡"
                      prop="deathNum"
                    ></el-table-column>
                    <el-table-column
                      sortable
                      label="现存无症状"
                      prop="asymptomNum"
                    ></el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column
                sortable
                label="省份"
                prop="name"
              ></el-table-column>
              <el-table-column
                sortable
                label="现存确诊"
                prop="econNum"
              ></el-table-column>
              <el-table-column
                sortable
                label="累计确诊"
                prop="value"
              ></el-table-column>
              <el-table-column
                sortable
                label="疑似"
                prop="susNum"
              ></el-table-column>
              <el-table-column
                sortable
                label="死亡"
                prop="deathNum"
              ></el-table-column>
              <el-table-column
                sortable
                label="现存无症状"
                prop="asymptomNum"
              ></el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china";
import jsonp from "jsonp";

const option = {
  title: {
    text: "疫情地图",
    link: "https://baidu.com",
    subtext: "疫情地图",
    sublink: "https://baidu.com",
  },
  series: [
    {
      name: "确诊人数",
      type: "map", //地图
      map: "china",
      label: {
        show: true, // 控制对应地区的汉字
        color: "#333",
        fontSize: 10,
      },
      roam: true, //控制地图放大缩小
      zoom: 1.2, //控制地图的放大缩小
      data: [], //接口返回的数据
      /*      控制地图板块的颜色和边框*/
      itemStyle: {
        areaColor: "#83b5e7",
        borderColor: "yellow", //边框颜色
      },
      /*     控制鼠标滑过之后的背景色和字体颜色*/
      emphasis: {
        label: {
          color: "#fff",
          fontsize: 12,
        },
        itemStyle: {
          areaColor: "#83b5e7",
        },
      },
    },
  ],
  visualMap: [
    {
      type: "piecewise",
      show: true,
      pieces: [
        //分段
        { min: 10000 },
        { min: 1000, max: 9990 },
        { min: 100, max: 999 },
        { min: 10, max: 99 },
        { min: 1, max: 9 },
      ],
      inRange: {
        symbol: "rect",
        color: ["#ffc0b1", "#e70520"],
      },
      itemWidth: 20,
      itemHeight: 10,
    },
  ],
  tooltip: {
    trigger: "item", //鼠标移入后显示人数
  },
};
export default {
  name: "map",
  data() {
    return {
      times: "",
      loading: true,
      info: [],
      tableData: [],
      top10: [],
    };
  },
  mounted() {
    //   获取接口数据
    this.getData();
    this.mychart = echarts.init(this.$refs.mapbox);
    this.mychart.setOption(option);
  },
  methods: {
    getData() {
      jsonp(
        "https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427",
        {},
        (err, data) => {
          // 接口数据请求成功
          if (!err) {
            let list = data.data.list.map((item) => ({
              name: item.name,
              value: item.value,
            }));
            option.series[0].data = list;
            this.tableData = data.data.list;
            this.mychart.setOption(option);
            this.buildTable(data);
          }
        }
      );
    },
    buildTable(data) {
      let list = data.data;
      let xcqz = {
        name: "现存确诊",
        value: list.econNum,
        yesterday: list.add_daily["addecon_new"],
      };
      let ljjw = {
        name: "累计境外输入",
        value: list.jwsrNum,
        yesterday: list.add_daily["addjwsr"],
      };
      let xwzz = {
        name: "现无症状",
        value: list.asymptomNum,
        yesterday: list.add_daily["addasymptom"],
      };
      let xcqzzz = {
        name: "现存确诊重症",
        value: list.heconNum,
        yesterday: list.add_daily["addhecon_new"],
      };
      let ljqz = {
        name: "累计确诊",
        value: list.gntotal,
        yesterday: list.add_daily["addcon_new"],
      };
      let ljsw = {
        name: "累计死亡",
        value: list.deathtotal,
        yesterday: list.add_daily["adddeath_new"],
      };
      let ljzy = {
        name: "累计治愈",
        value: list.curetotal,
        yesterday: list.add_daily["addcure_new"],
      };
      let xcys = {
        name: "现存疑似",
        value: list.sustotal,
        yesterday: list.add_daily["wjw_addsus_new"],
      };
      this.times = list.times;
      this.top10 = list.jwsrTop;
      this.info.push(xcqz);
      this.info.push(ljjw);
      this.info.push(xwzz);
      this.info.push(xcqzzz);
      this.info.push(ljqz);
      this.info.push(ljsw);
      this.info.push(ljzy);
      this.info.push(xcys);
      this.loading = false;
    },
  },
};
</script>

<style scoped>
</style>>